<template>
	<div class="wscn-http404-container">
		<div class="wscn-http404">
			<div class="pic-404">
				<img class="pic-404__parent" src="@/assets/img/404.png" alt="404" />
			</div>
			<div class="bullshit">
				<div class="bullshit__oops">404!</div>
				<div class="bullshit__headline">{{ message }}</div>
				<div class="bullshit__info">
					请检查您的地址是否正确，或者点击下方按钮返回登陆页。
				</div>
				<span class="bullshit__return-home" @click="toLogin">返回登陆</span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Page404',
	computed: {
		message() {
			return '该页面不存在！'
		}
	},
	methods: {
		toLogin() {
			this.$router.push('/login')
		}
	}
}
</script>

<style scoped lang="scss">
.wscn-http404-container {
	transform: translate(-50%, -50%);
	position: absolute;
	top: 40%;
	left: 50%;
}
.wscn-http404-container {
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
	top: 40%;
	left: 50%;
}

.wscn-http404 {
	position: relative;
	width: 950px;
	padding: 0 50px;
	overflow: hidden;
}

.wscn-http404 .pic-404 {
	position: relative;
	float: left;
	width: 600px;
	overflow: hidden;
}

.wscn-http404 .pic-404__parent {
	width: 100%;
}

.wscn-http404 .bullshit {
	position: relative;
	float: left;
	width: 300px;
	padding: 50px 0;
	overflow: hidden;
}

.wscn-http404 .bullshit__oops {
	font-size: 32px;
	line-height: 40px;
	color: $baseColor;
	margin-bottom: 20px;
}

.wscn-http404 .bullshit__headline {
	font-size: 20px;
	line-height: 24px;
	color: #222;
	margin-bottom: 10px;
}

.wscn-http404 .bullshit__info {
	font-size: 13px;
	line-height: 21px;
	color: grey;
	margin-bottom: 40px;
}
.wscn-http404 .bullshit__return-home {
	display: block;
	float: left;
	width: 110px;
	height: 36px;
	background: $baseColor;
	border-radius: 100px;
	text-align: center;
	color: #fff;
	font-size: 14px;
	line-height: 36px;
	cursor: pointer;
}
</style>
